<template>
    <view class="fix-top-window">
        <view class="uni-header">
            <uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
            <view class="uni-group">
                <input class="uni-search" type="text" v-model="searchVal" placeholder="请输入搜索内容" />
                <button class="uni-button hide-on-phone" type="default" size="mini" @click="search">搜索</button>
                <navigator :url="'./add'">
                    <button class="uni-button" type="primary" size="mini">添加</button>
                </navigator>
                <button class="uni-button" type="warn" size="mini" :disabled="!selectedIndexs.length" @click="deleteByIds">批量删除</button>
            </view>
        </view>
        <view class="uni-container">
            <uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
                <uni-tr>
                    <uni-th width="150" align="center">ID</uni-th>
                    <uni-th width="180" align="center">当前admin页面访问地址</uni-th>
                    <uni-th align="center">钉钉DevOps机器人Webhook</uni-th>
                    <uni-th align="center">钉钉DevOps机器人密钥</uni-th>
                    <uni-th align="center">钉钉通知@群成员手机号</uni-th>
                    <uni-th width="204" align="center">创建时间</uni-th>
                    <uni-th width="204" align="center">更新时间</uni-th>
                    <uni-th width="204" align="center">操作</uni-th>
                </uni-tr>
                <uni-tr v-for="(item, index) in tableData" :key="index">
                    <uni-td>{{ item.id }}</uni-td>
                    <uni-td>{{ item.yueOpenDevopsDeployAdminUrl }}</uni-td>
                    <uni-td>{{ item.dingtalkDevopsRobotWebhook }}</uni-td>
                    <uni-td>{{ item.dingtalkDevopsRobotSignSecret }}</uni-td>
                    <uni-td>{{ item.dingtalkAtMobiles }}</uni-td>
                    <uni-td>{{ item.createTime }}</uni-td>
                    <uni-td>{{ item.updateTime }}</uni-td>
                    <uni-td>
                        <view class="uni-group">
                            <navigator :url="'./edit?item='+ encodeURIComponent(JSON.stringify(item))">
                                <button class="uni-button" type="primary" size="mini">编辑</button>
                            </navigator>
                            <button @click="deleteById(item.id, index)" class="uni-button" size="mini" type="warn">删除</button>
                        </view>
                    </uni-td>
                </uni-tr>
            </uni-table>
            <view class="uni-pagination-box">
                <uni-pagination show-icon show-page-size :page-size="pageSize" :pageSizeRange="pageSizeRange" :current="pageNum" :total="total" @change="changePage" @pageSizeChange="changePageSize" />
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                searchVal: '',
                tableData: [],
                // 每页数据量
                pageSize: 10,
                pageSizeRange: [10, 20, 50, 200],
                // 当前页
                pageNum: 1,
                // 数据总量
                total: 0,
                loading: false,
                selectedIndexs: []
            }
        },
        onLoad() {
            this.selectedIndexs = []
            this.getData(1)
        },
        methods: {
            // 多选处理
            selectedItems() {
                return this.selectedIndexs.map(i => this.tableData[i])
            },
            // 多选
            selectionChange(e) {
                // console.log(e.detail.index)
                this.selectedIndexs = e.detail.index
            },
            // 分页触发
            changePage(e) {
                this.$refs.table.clearSelection()
                this.selectedIndexs.length = 0
                this.getData(e.current)
            },
            changePageSize(pageSize) {
                this.pageSize = pageSize
                this.pageNum = 1
                this.$nextTick(() => {
                    this.getData(1);
                })
            },
            // 搜索
            search() {
                this.getData(1, this.searchVal)
            },
            // 获取数据
            getData(pageNum, value = '') {
                this.loading = true
                this.pageNum = pageNum

                uni.request({
                    url: '/auth/v1/confNotify/page',
                    dataType: "string",
                    data: {
                        pageNum: pageNum,
                        pageSize: this.pageSize
                    },
                    success: (res) => {
                        let data = res.data.data;
                        this.pageNum = data.pageNum;
                        this.total = data.total;
                        this.tableData = [];
                        this.tableData = data.list;
                    }
                });
                this.loading = false
            },
            deleteById(id, index) {
                this.loading = true
                uni.request({
                    method: "DELETE",
                    url: '/auth/v1/confNotify/deleteById',
                    data: {
                        id: id
                    },
                    success: (res) => {
                        if (res.data.code == 200) {
                            uni.showToast({
                                title: '删除成功'
                            })
                        }
                    }
                });
                
                this.tableData.splice(index, 1)
                this.total = this.total - 1
                this.loading = false
                this.$refs.table.clearSelection()
            },
            // 批量删除
            deleteByIds() {
                this.loading = true
                let ids = [];
                let selectedItems = this.selectedItems();
                for (var i = 0; i < selectedItems.length; i++) {
                    ids[i] = selectedItems[i].id;
                }
                uni.request({
                    method: "DELETE",
                    url: '/auth/v1/confNotify/deleteByIds',
                    data: {
                        ids: ids
                    },
                    success: (res) => {
                        if (res.data.code == 200) {
                            uni.showToast({
                                title: '删除成功'
                            })
                        }
                    }
                });

                this.$refs.table.clearSelection()
                this.selectedIndexs.length = 0
                setTimeout(() => {
                    this.getData(1)
                }, 200)
            }
        }
    }
</script>

<style lang="scss">
    .uni-group {
        display: flex;
        align-items: center;
    }

    .tags-manager {
        &--x {
            width: 400px;
            padding: 40px 30px;
            border-radius: 5px;
            background-color: #fff;
        }

        &--header {
            font-size: 22px;
            color: #333;
            text-align: center;
        }
    }

    .mb {
        margin-bottom: 80px;
    }

    .ml {
        margin-left: 30px;
    }
</style>
